{% extends "Sales_base.html" %}
{% block title %}
关于我们
{% endblock %}
{% block head %}
    <style>
        /* 关于我们页面样式 */
        .about-container {
            display: flex;
            gap: 2rem;
            padding: 2rem 5%;
            margin-top: 60px;
        }

        /* 侧边栏样式 */
        .about-sidebar {
            width: 280px;
            background: #f8f9fa;
            padding: 1.5rem;
            border-radius: 8px;
            height: fit-content;
        }

        .sidebar-item {
            padding: 1rem;
            margin: 0.5rem 0;
            cursor: pointer;
            border-left: 3px solid transparent;
            transition: all 0.3s;
        }

        .sidebar-item:hover {
            background: #e9ecef;
            border-left-color: #2c7a47;
        }

        .sidebar-item.active {
            background: white;
            border-left-color: #2c7a47;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        /* 内容区域 */
        .content-area {
            flex: 1;
            max-width: 800px;
        }

        /* 公司简介样式 */
        .company-intro {
            background: white;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        }

        .intro-text {
            line-height: 1.8;
            color: #444;
            margin: 1rem 0;
        }

        /* 发展历程时间线 */
        .timeline {
            position: relative;
            padding: 2rem 0;
        }

        .timeline-item {
            padding: 1.5rem;
            margin-left: 30px;
            border-left: 2px solid #2c7a47;
            position: relative;
            margin-bottom: 2rem;
        }

        .timeline-item::before {
            content: '';
            width: 16px;
            height: 16px;
            background: #2c7a47;
            border-radius: 50%;
            position: absolute;
            left: -9px;
            top: 24px;
        }

        /* 团队展示 */
        .team-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1.5rem;
        }

        .team-member {
            text-align: center;
            padding: 1rem;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        }

        .member-photo {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            object-fit: cover;
            margin: 0 auto 1rem;
        }

        @media (max-width: 768px) {
            .about-container {
                flex-direction: column;
            }

            .about-sidebar {
                width: 100%;
            }
        }
    </style>
{% endblock %}
{% block main %}
    <!-- 关于我们模块 -->
    <div class="about-container">
        <!-- 左侧导航 -->
        <div class="about-sidebar">
            <div class="sidebar-item active" data-content="intro">公司简介</div>
            <div class="sidebar-item" data-content="history">发展历程</div>
            <div class="sidebar-item" data-content="team">核心团队</div>
            <div class="sidebar-item" data-content="honor">资质荣誉</div>
        </div>

        <!-- 右侧内容区 -->
        <div class="content-area" id="content-area">
            <!-- 内容通过JavaScript动态生成 -->
        </div>
    </div>

    <script>
        // 模拟数据
        const aboutData = {
            intro: {
                title: "公司简介",
                content: `
                    <div class="company-intro">
                        <h2>农业科技引领者</h2>
                        <p class="intro-text">我们成立于2010年，致力于推动现代农业技术创新发展。通过整合物联网、大数据和生物技术，为全国农户提供智能化种植解决方案。目前服务范围覆盖全国23个省市，合作农场超过1200家。</p>
                        <p class="intro-text">秉承"科技赋能农业"的理念，我们持续投入研发，已获得国家高新技术企业认证，拥有自主知识产权专利28项。</p>
                    </div>
                `
            },
            history: {
                title: "发展历程",
                content: `
                    <div class="timeline">
                        <div class="timeline-item">
                            <h3>2010年</h3>
                            <p>公司正式成立，开展农业技术咨询服务</p>
                        </div>
                        <div class="timeline-item">
                            <h3>2014年</h3>
                            <p>推出首款智能农业监控系统</p>
                        </div>
                        <div class="timeline-item">
                            <h3>2018年</h3>
                            <p>建立全国农业大数据平台</p>
                        </div>
                        <div class="timeline-item">
                            <h3>2023年</h3>
                            <p>服务农户突破10000家，获得国家科技进步奖</p>
                        </div>
                    </div>
                `
            },
            team: {
                title: "核心团队",
                content: `
                    <div class="team-grid">
                        <div class="team-member">
                            <img src="https://via.placeholder.com/120x120" class="member-photo" alt="CEO">
                            <h3>张伟</h3>
                            <p>创始人/CEO</p>
                            <p>农业信息化专家</p>
                        </div>
                        <div class="team-member">
                            <img src="https://via.placeholder.com/120x120" class="member-photo" alt="CTO">
                            <h3>李明</h3>
                            <p>首席技术官</p>
                            <p>物联网技术负责人</p>
                        </div>
                        <div class="team-member">
                            <img src="https://via.placeholder.com/120x120" class="member-photo" alt="专家">
                            <h3>王芳</h3>
                            <p>高级农艺师</p>
                            <p>种植技术顾问</p>
                        </div>
                    </div>
                `
            },
            honor: {
                title: "资质荣誉",
                content: `
                    <div class="honor-list">
                        <div class="honor-item">
                            <h3>国家高新技术企业</h3>
                            <p>2018-2023年度认证</p>
                        </div>
                        <div class="honor-item">
                            <h3>农业科技创新奖</h3>
                            <p>2020年度优秀解决方案</p>
                        </div>
                        <div class="honor-item">
                            <h3>ISO 9001认证</h3>
                            <p>质量管理体系认证</p>
                        </div>
                    </div>
                `
            }
        };

        // 渲染内容函数
        function renderContent(section) {
            const container = document.getElementById('content-area');
            const data = aboutData[section];

            container.innerHTML = `
                <h2>${data.title}</h2>
                ${data.content}
            `;
        }

        // 侧边栏点击事件
        document.querySelectorAll('.sidebar-item').forEach(item => {
            item.addEventListener('click', () => {
                // 移除所有active类
                document.querySelectorAll('.sidebar-item').forEach(c =>
                    c.classList.remove('active'));

                // 添加active类到当前点击项
                item.classList.add('active');

                // 获取分类并渲染内容
                const section = item.dataset.content;
                renderContent(section);
            });
        });

        // 初始渲染
        renderContent('intro');
    </script>
{% endblock %}